<template>
  <LoginFormTitle v-if="getShow" />
  <el-form ref="MobileFormRef" :model="MobileForm" :rules="MobileFormRules" v-if="getShow">
    <el-form-item
      prop="phoneNumber"
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }"
    >
      <el-input
        v-model="MobileForm.phoneNumber"
        :placeholder="$t('mobileLogin.phonePlaceholder')"
      ></el-input>
    </el-form-item>

    <el-form-item
      prop="verificationCode"
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
    >
      <el-row :gutter="20">
        <el-col :span="16">
          <el-input
            v-model="MobileForm.verificationCode"
            :placeholder="$t('mobileLogin.verificationCodePlaceholder')"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <CountButton style="width: 100%; height: 100%" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
    >
      <el-button type="primary" round @click="handleLogin" style="width: 100%; height: 40px">{{
        $t('login.signIn')
      }}</el-button>
    </el-form-item>
    <el-form-item
      v-motion
      :initial="{ opacity: 0, y: 100 }"
      :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }"
    >
      <el-button round @click="handleBackLogin" style="width: 100%; height: 40px">{{
        $t('register.backSignIn')
      }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, computed, unref, ref, reactive } from 'vue'
import LoginFormTitle from './LoginFormTitle.vue'
import { CountButton } from '@/components/CountDown'
import { ElForm } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { LoginStateEnum, useLoginState } from '../useLogin'

export default defineComponent({
  name: 'MobileForm',
  components: { LoginFormTitle, CountButton },
  setup() {
    const { t } = useI18n()
    const MobileFormRef = ref<InstanceType<typeof ElForm>>()

    const MobileForm = reactive({
      phoneNumber: '',
      verificationCode: ''
    })

    const MobileFormRules = {
      phoneNumber: [
        {
          required: true,
          message: t('mobileLogin.phoneError'),
          trigger: 'blur'
        },
        {
          pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
          message: t('mobileLogin.phoneSubError'),
          trigger: 'blur'
        }
      ],
      verificationCode: [
        {
          required: true,
          message: t('mobileLogin.verificationCodeError'),
          trigger: 'blur'
        }
      ]
    }

    async function handleLogin() {
      let valid = await MobileFormRef.value?.validate()
      console.log(valid)
    }

    // 切换登录/注册/其他登录的表单
    const { handleBackLogin, getLoginState } = useLoginState()
    const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)

    return {
      MobileFormRef,
      MobileForm,
      MobileFormRules,
      handleLogin,
      LoginStateEnum,
      handleBackLogin,
      getShow
    }
  }
})
</script>

<style scoped lang="scss">
/* 样式穿透 */
::v-deep(.el-input--small .el-input__inner) {
  height: 40px;
  line-height: 40px;
}
</style>
